<template>
  <div class="users">
    <el-card>
      <el-row>
        <el-col :span="6" class="left">
          <!-- 部门列表 -->
          <div
            v-for="dept in deptList"
            :key="dept.id"
            :class="[
              'left-list-item',
              selectedDeptId === dept.id ? 'active' : ''
            ]"
            @click="onDeptClicked(dept.id)"
          >
            <div>
              <span class="title">{{ dept.name.substr(0, 2) }}</span>
              <span class="name">{{ dept.name }}</span>
            </div>

            <!-- 下拉菜单 -->
            <el-dropdown class="action">
              <span class="el-dropdown-link">
                <i class="el-icon-more"></i>
              </span>

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus"
                  >修改部门信息</el-dropdown-item
                >
                <el-dropdown-item icon="el-icon-plus"
                  >删除部门</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <!-- 添加部门按钮 -->
          <div class="add-dept-btn">
            <i class="el-icon-plus"></i>
            <span>添加部门</span>
          </div>
        </el-col>
        <el-col :span="18" class="right"></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  created() {
    this.getDeptList();
  },
  data() {
    return {
      selectedDeptId: 0,
      deptList: []
    };
  },
  methods: {
    onDeptClicked(index) {
      console.log(index);
      this.selectedDeptId = index;
    },
    async getDeptList() {
      const res = await this.$http.get("/depts");
      this.deptList = res.data;
    }
  }
};
</script>

<style lang="less">
.users {
  height: 100%;

  .el-card,
  .el-card__body {
    height: 100%;

    .el-row,
    .el-col {
      height: 100%;
    }
  }

  .left {
    border: 1px solid #336699;

    .active {
      background-color: #ddebfd;
      color: #409eff;
    }

    .left-list-item {
      line-height: 35px;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      margin: 10px;
      border-radius: 5px;
      cursor: pointer;

      .title {
        margin-right: 15px;
        display: inline-block;
        background-color: #409eff;
        width: 36px;
        border-radius: 2px;
        color: #f2f6fc;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        margin-right: 15px;
      }

      .name {
      }
    }

    .add-dept-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      i {
        margin-right: 5px;
      }
    }
  }

  .right {
    border: 1px solid #663399;
  }
}
</style>

